@import '~styles/settings.scss';
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i);

p {
  font-size: rem(14px);
  color: $slate;
  line-height: 1.4;

  a {
    color: $green-gfw;

    &:hover {
      color: darken($green-gfw, 10%);
    }
  }
}

.text {
  font-family: $font-family-1;

  &.-color-1 {
    color: $font-color-1;
  }

  &.-color-2 {
    color: $font-color-2;
  }

  &.-color-2-o {
    color: rgba($font-color-2, 0.5);
  }

  &.-color-3 {
    color: $font-color-3;
  }

  &.-color-4 {
    color: $font-color-4;
  }

  &.-color-5 {
    color: $font-color-5;
  }

  &.-color-6 {
    color: $font-color-6;
  }

  &.-color-7 {
    color: rgba($font-color-1, 0.7);
  }

  &.-color-8 {
    color: rgba($font-color-6, 0.8);
  }

  &.-light {
    font-weight: 300;
  }

  &.-bold {
    font-weight: 500;
  }

  &.-italic {
    font-style: italic;
  }

  &.-spaced {
    line-height: 1.7;
  }

  &.-half-opacity {
    opacity: 0.5;
  }

  &.-title-biggest {
    font-size: 30px;
    line-height: 1.33;

    @media screen and (min-width: $screen-m) {
      font-size: 59px;
      line-height: 1.02;
    }
  }

  &.-title-big {
    font-size: 24px;
    line-height: 1.33;
    letter-spacing: 0.2px;

    @media screen and (min-width: $screen-m) {
      font-size: 35px;
      line-height: 1.14;
    }
  }

  &.-title {
    font-size: 24px;
    line-height: 1.33;

    @media screen and (min-width: $screen-m) {
      font-size: 30px;
      line-height: 1.34;
    }
  }

  &.-title-m {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.4px;

    @media screen and (min-width: $screen-m) {
      font-size: 28px;
    }
  }

  &.-title-s {
    font-size: 16px;
    line-height: 1.88;

    @media screen and (min-width: $screen-m) {
      font-size: 21px;
      line-height: 1.43;
    }
  }

  &.-title-xs {
    font-size: 16px;
    line-height: 1.5;

    @media screen and (min-width: $screen-m) {
      font-size: 18px;
      line-height: 2.22;
    }
  }

  &.-title-xxs {
    font-size: 14px;
    letter-spacing: 0.1px;
  }

  &.-underline {
    text-decoration: underline;
  }

  &.-paragraph {
    font-size: 16px;
    line-height: 1.5;

    @media screen and (min-width: $screen-m) {
      font-size: 18px;
      line-height: 1.67;
    }
  }

  &.-paragraph-big {
    font-size: 24px;
    line-height: 1.33;
    letter-spacing: -0.5px;

    @media screen and (min-width: $screen-m) {
      font-size: 30px;
      letter-spacing: -1px;
    }
  }

  &.-paragraph-2 {
    font-size: 16px;
    line-height: 1.31;

    @media screen and (min-width: $screen-m) {
      font-size: 18px;
      line-height: 1.17;
    }
  }

  &.-paragraph-3 {
    font-size: 18px;
    line-height: 1.67;
    letter-spacing: -0.4px;
  }

  &.-paragraph-4 {
    font-size: 18px;
    line-height: 1.67;
  }

  &.-paragraph-5 {
    font-size: 14px;
  }

  &.-paragraph-6 {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
}
